<template>
  <div>
    <div>
      <el-button
        type="primary"
        size="mini"
        @click="textBtnClick(true, false)">编 码</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="textBtnClick(false, false)">解 码</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="textBtnClick(true, true)">hex编码</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="textBtnClick(false, true)">hex解码</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="imageBtnClick(true)">图片编码</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="imageBtnClick(false)">图片解码</el-button>
    </div>

    <!--提示框-->
    <el-dialog
      :title="'base64' + (hex ? '(hex)' : '') + (coding ? '编码' : '解码')"
      :visible.sync="textPopiIsShow"
      width="800px">
      <el-form
        ref="form"
        :model="form"
        label-width="80px">
        <el-form-item label="Input">
          <el-input
            v-model="form.inputValue"
            type="textarea"/>
        </el-form-item>
        <el-form-item
          v-if="form.data"
          label="Data" >
          <el-card
            :body-style="{ padding: '0px 15px' }"
            class="box-card">
            <span>{{ form.data }}</span>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            class="float-right"
            style="margin-left: 20px"
            type="primary"
            @click="textOkBtnClick">确 定</el-button>
          <el-button
            size="mini"
            class="float-right"
            @click="textPopiIsShow = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--提示框-->
    <el-dialog
      :title="'base64-图片' + (coding ? '编码' : '解码')"
      :visible.sync="imagePopiIsShow"
      width="800px">

      <div v-if="coding">
        <p
          v-if="form.data"
          class="box-card image-base-64">
          {{ form.data }}
        </p>
        <p v-else>
          <image-up
            ref="WImageUp"/>
        </p>
      </div>
      <div v-else>
        <el-form
          ref="form"
          :model="form"
          label-width="80px">
          <el-form-item label="Input">
            <el-input
              v-model="form.inputValue"
              type="textarea"/>
          </el-form-item>
          <el-form-item
            v-if="form.data"
            label="Data">
            <img
              :src="form.data"
              style="max-width: 200px">
          </el-form-item>
        </el-form>
      </div>

      <div class="clearfix">
        <el-button
          style="margin-left: 20px"
          size="mini"
          class="float-right"
          type="primary"
          @click="imageOkBtnClick">确 定</el-button>
        <el-button
          class="float-right"
          size="mini"
          @click="imagePopiIsShow = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import API from '@/api/apis'
import ImageUp from '@/components/global/imageUp/server'
import { post } from '@/api/ajax'
export default {
  name: 'WebToolCodingBase64',
  components: {
    ImageUp
  },
  data() {
    return {
      /**
       * 文字弹窗是否显示
       */
      textPopiIsShow: false,
      /**
       * 编码还是解码
       */
      coding: true,
      // hex
      hex: false,
      form: {
        inputValue: '',
        data: ''
      },
      type: '',
      // 图片base64是否显示
      imagePopiIsShow: false,
      imageBase64: null
    }
  },
  methods: {
    textBtnClick(coding, hex) {
      this.form = {
        inputValue: '',
        data: ''
      }
      this.coding = coding
      this.hex = hex
      this.type = this.getType()
      this.textPopiIsShow = true
    },
    // 获取类型
    getType() {
      if (this.coding) {
        return this.hex ? 'hexEncode' : 'encode'
      } else {
        return this.hex ? 'hexDecode' : 'decode'
      }
    },
    textOkBtnClick() {
      if (!this.form.inputValue) {
        this.$w_popview.msgError('请输入数据')
        return
      }
      post(API.coding.base64, {
        code: this.form.inputValue,
        type: this.type
      }).then((data) => {
        this.form.data = data
      }).catch(() => {})
    },
    imageBtnClick(coding) {
      this.coding = coding
      this.form.inputValue = ''
      this.form.data = ''
      this.imagePopiIsShow = true
    },
    imageOkBtnClick() {
      if (this.coding) {
        this.$refs['WImageUp'].upImage().then((data) => {
          this.form.inputValue = data.path
          post(API.coding.imageToBase64, {
            imageUrl: this.form.inputValue
          }).then((data) => {
            this.form.data = data
          }).catch(() => {})
        }).catch((err) => {
          this.$w_popview.msgError(err.msg)
        })
      } else {
        if (!this.form.inputValue) {
          this.$w_popview.msgError('请输入数据')
          return
        }
        post(API.coding.base64ToImage, {
          imageStr: this.form.inputValue
        }).w_then((data) => {
          this.form.data = data
        })
      }
    }
  }
}
</script>

<style scoped>

  .image-base-64 {
    word-wrap:break-word;
    word-break:break-all;
  }

</style>
